<template>
  <div class="project-form-for-designer">
    <Form :label-width="105">
      <FormItem label="工程名称">
        <Input size="small" v-model="name" disabled/>
      </FormItem>
      <FormItem label="备注">
        <Input size="small" v-model="remark" type="textarea" disabled/>
      </FormItem>
      <FormItem label="主题方案">
        <Select size="small" transfer v-model="echart_theme_id" :filterable="true" disabled>
          <Option v-for="item in echartThemes" :value="item.value" :key="item.value" :label="item.label">
            <span>{{ item.label }}</span>
            <span v-if="item.is_sys == '1'" style="color: #009688;">（系统主题）</span>
            <div style="width: 100%; height: 20px;">
              <div style="width: 20px; height: 100%; float: left; text-align: center;" :style="{backgroundColor: color}"
                   v-for="(color, index) in item.colors" :key="index">
                <span v-if="!color" style="line-height: 20px;">X</span>
              </div>
            </div>
          </Option>
        </Select>
      </FormItem>

      <FormItem label="创建日期">
        <Input size="small" v-model="create_date" disabled/>
      </FormItem>

    </Form>
  </div>
</template>

<script>
  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'ProjectFormForDesigner',
    data() {
      return {
        echartThemes: []
      }
    },
    mounted() {
      this.$PnApi.EchartThemeApi.getAllEchartTheme().then(result=>{
        result.data.payload.forEach(item=>{
          this.echartThemes.push({
            is_sys: item.is_sys,
            label: item.name,
            value: item.id,
            colors: JSON.parse(item.json_text).color
          })
        })
      })
    },
    methods: {

    },
    computed: {
      ...mapFields({
        id: 'projectInfo.id',
        name: 'projectInfo.name',
        remark: 'projectInfo.remark',
        echart_theme_id: 'projectInfo.echart_theme_id',
        create_date: 'projectInfo.create_date'
      })
    }
  }
</script>

<style scoped>
  .ivu-form-item {
    margin-bottom: 0px;
  }
</style>
